<!DOCTYPE html>
<html>
  <head>
    <title>Video</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- jQuery Mobile -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>


    <!-- PhoneGap -->
    <script src="cordova-2.3.0.js"></script>


    <!-- Partial js -->
    <script src="js/database.js"></script>
    <script src="js/geolocationData.js"></script>
    <script src="js/videoData.js"></script>

    <!-- Personal CSS -->
    <link rel="stylesheet" type="text/css" href="css/style.css">


    <script type="text/javascript">
        /* creo l'ascoltatore che chiamerà la funzione onDeviceReady quando il codice
            PhoneGap è pronto per essere eseguito */
        document.addEventListener("deviceready", onDeviceReady, true);
        
        var videoCapture = '' ; // variabile che conterrà l'oggetto capture
        
        function onDeviceReady() {
            //recupero gli elementi presenti nel database
            getItemsVideo();

            // ottengo l'oggetto capture
            videoCapture = navigator.device.capture;
            
            $('#record').bind('touchstart', function() {
               getVideo(); 
            });
        }
        
        function getVideo() {
            videoCapture.captureVideo(onSuccessVideo, onErrorVideo, {limit: 2});
        }


            // getItems verrà eseguita se la chiamata al db avviene con successo
            function getItemsVideo() {
                db = getDatabase();
                db.transaction(function(tx) {
                    tx.executeSql("SELECT * FROM myDiary WHERE type='video' ORDER BY date DESC", [], querySuccess, databaseError);
                }, databaseError);

            }

    
    </script>
</head>
<body>

    <div data-role="page" data-add-back-btn="true">

        <header data-role="header" data-position="fixed">
            <h1>Cattura Video</h1>
        </header>

        <div data-role="content">
            <h1>myVideo</h1>
            <div id="messageError"></div>
            <button id="record">Registra video</button>
            <div id="objects" data-role="collapsible-set" data-theme="d" data-content-theme="d"></div>
        </div>

        <footer data-role="footer" data-position="fixed">
            &copy; myUdine;
        </footer>
    </div>
    
</body>
</html>